<template>
	<view class="gushi-wrap">
		<view class="left">
			<view class="cover">
				<image :src="backgroundImg" class="cover-img" mode="aspectFill"></image>
				<view class="cover-title">{{name}}</view>
				<view class="icon-group">
					<image src="/static/juben/redu-gushi-xiwen.jpg" class="icon"></image>
					<image src="/static/juben/dianzan-gushi-xiwen.jpg" class="icon"></image>
					<image src="/static/juben/zhuanfa-gushi-xiwen.jpg" class="icon"></image>
				</view>
			</view>
		</view>
		<view class="right">
			<view class="plot">{{plot}}</view>
			<view class="avatar-group">
				<view v-for="(item,i) in avatarList">
					<image :src="item" class="avatar"></image>
				</view>
			</view>
			<view class="author">
				{{author}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: '乡村爱情故事'
			},
			backgroundImg: {
				type: String,
				default: '/static/juben/linshi/cover.jpg'
			},
			plot: {
				type: String,
				default: "翠花结婚"
			},
			avatarList: {
				type: [],
				default: ["/static/juben/linshi/cover.jpg", "/static/juben/VS-xiwen.jpg", "/static/juben/linshi/cover.jpg",
					"/static/juben/linshi/cover.jpg", "/static/juben/linshi/cover.jpg", "/static/juben/linshi/cover.jpg",
					"/static/juben/linshi/cover.jpg"
				]
			},
			author: {
				type: String,
				default: "Tm"
			}
		}
	}
</script>

<style scoped>
	.gushi-wrap {
		width: 100%;
		height: 360upx;
		background-color: #FFF4F8;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.left {
		width: 45%;
		height: 80%;
	}

	.right {
		width: 45%;
		height: 80%;
	}

	.cover {
		width: 100%;
		position: relative;
		height: 100%;
		/* background-color: white; */
	}

	.cover-img {
		width: 100%;
		height: 200upx;
		position: absolute;
		top: 0;
	}

	.cover-title {
		width: 100%;
		position: absolute;
		top: 150upx;
		line-height: 50upx;
		font-size: 30upx;
		height: 50upx;
		text-align: center;
		color: white;
		background-color: rgba(50, 50, 50, 0.6);
	}

	.icon-group {
		width: 100%;
		display: flex;
		justify-content: space-around;
		position: absolute;
		top: 210upx;
	}

	.icon {
		width: 60upx;
		height: 60upx;
	}

	.plot {
		margin: 5% 0 5% 0;
	}

	.avatar-group {
		width: 100%;
		height: 80upx;
		display: flex;
		overflow: auto;
	}

	.avatar {
		border-radius: 50%;
		width: 80upx;
		height: 80upx;
	}

	.author {
		margin: 15% 15% 0 0;
		float: right;
	}
</style>
